<template>
  <view class="category">
    <!-- <UgoSearch></UgoSearch> -->
    <view class="main">
      <view class="menus">
        <view
          :class="['menu-item', current === index ? 'active' : '']"
          v-for="(item, index) in categories"
          :key="item.id"
          @click="handleMenuSelect(item, index)"
          >{{ item.name }}</view
        >
      </view>
      <view class="content">
        <view class="category-banner"></view>
        <view class="goods-group-title">{{ dataType.name }}</view>
        <view class="goods-group">
          <navigator
            v-for="item1 in subTypeData"
            :key="item1.id"
            :url="'/pages/goods_detail/goods_detail?cid=' + item1.id"
          >
            <u-image
              width="156rpx"
              height="156rpx"
              mode="aspectFit"
              :src="item1.image"
            ></u-image>
            <view class="cat-name">{{ item1.name }}</view>
          </navigator>
        </view>
        <u-divider text="滑动查看更多分类" :hairline="true"></u-divider>
      </view>
    </view>
  </view>
</template>

<script>
import { postMenu, getMenu } from "../../config/api";
export default {
  data() {
    return {
      // 因为数据渲染较慢，主要原因是写在data违反了小程序规则，应该把categories当成一个普通的全局变量即可
      categories: [], //商品分类数组
      current: 0, //左侧标题选中的索引
      dataType: {
        id: "",
        name: "",
      },
    };
  },
  onLoad() {
    // categories变量没有在data中声明过 所以就是一个普通的全局变量 挂载this上变量即可
    this.categories = []; //商品分类数组
    // 商品分类数据--异步！！要等待一段时间 数据才会回来
    this.getCategories();
  },
  computed: {
    subTypeData() {
      return this.categories[this.current]
        ? this.categories[this.current].firstSecondClassificationDTO
        : [];
    },
  },
  methods: {
    // 获取商品分类数据
    async getCategories() {
      const res = await getMenu({
        param: {},
        type: 1,
      });
      this.categories = res.data?.classificationList;
      this.dataType.name = this.categories[0]?.name;
      // console.log(this.categories, "jfjfjfjfjfjfjfjfjfjfj55");
    },
    // 左侧标题的点击事件
    handleMenuSelect(val, current) {
      this.dataType.id = val.id;
      this.dataType.name = val.name;
      this.current = current;
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      background-color: #f6f8fa;
      .menu-item {
        text-align: center;
        height: 88rpx;
        line-height: 88rpx;
        color: #6d6d6d;
        font-size: 14px;
      }
      /* 选中的样式 */
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      background-color: #fff;
      padding: 10px 12px 0;
      .category-banner {
        width: 100%;
        height: 95px;
        border-radius: 20px;
        background: #dcf3ff;
      }
      .goods-group-title {
        height: 112rpx;
        // text-align: center;
        line-height: 112rpx;
        font-family: PingFang SC Heavy;
        font-size: 15px;
        font-weight: normal;
        letter-spacing: 0em;
        color: #3d3d3d;

        // &::before,
        // &::after {
        //   content: "/";
        //   margin: 0 10rpx;
        //   color: #ccc;
        // }
      }
      .goods-group {
        display: flex;
        flex-wrap: wrap;

        navigator {
          width: 33.33%;
          height: 218rpx;
          display: flex;
          flex-direction: column;
          // 侧轴
          align-items: center;
          .cat-name {
            height: 62rpx;
            line-height: 62rpx;
            font-family: PingFang SC Medium;
            font-size: 12px;
            font-weight: normal;
            letter-spacing: 0em;

            /* 文字色6D6D6D */
            color: #6d6d6d;
          }
        }
      }

      ::v-deep .u-divider__text {
        font-size: 12px !important;
      }
    }
  }
}
</style>
